<template>
  <!-- 这里是预览面试技巧文章内容组件封装 -->
  <div class="mypreview">
    <el-dialog title="预览文章" :visible="showpreview" width="50%" :before-close="close">
      <el-form :model="myform">
        <!-- <el-input readonly v-model="myform.title"></el-input> -->
        <p style="font-size: 24px;">
          <strong> {{ myform.title }}</strong>
        </p>
        <el-row :gutter="20">
          <el-col :span="6">
            <div>{{ myform.createTime | dateFormat }}</div>
          </el-col>
          <el-col :span="6">
            <span> <i class="el-icon-view myico"></i>{{ myform.visits }}</span>
            <!-- <el-input readonly size="small" v-model=""></el-input> -->
          </el-col>
        </el-row>
        <el-input type="textarea" disabled autosize v-model="myform.articleBody" v-html="myform.articleBody"></el-input>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { detail } from '@/api/hmmm/articles.js'
export default {
  props: ['showpreview'],
  data() {
    return {
      myform: {}
    }
  },
  methods: {
    // 获取详细信息
    async getlist(row) {
      let res = await detail(row)
      // console.log(res)
      // 给数据源赋值
      this.myform = res.data
    },
    close() {
      // 关闭弹出层
      this.$emit('update:showpreview', false)
    }
  }
}
</script>

<style lang="scss">
.el-textarea__inner {
  border: none;
  resize: none;
}
.myico {
  margin: 0 3px;
}
</style>
